<template>
  <ElForm label-position="top" v-if="data" :key="data.id">
    <ElFormItem label="字段标识">
      <ElInput v-model="data.element_code" />
    </ElFormItem>
    <ElFormItem label="类型" v-if="data.isShowType && hasKey('isShowType')">
      <ElSelect v-model="data.element_control" @change="handleTypeModeChange">
        <ElOption
          :value="item.value"
          :label="item.label"
          v-for="item in conSelectType"
          :key="item.value"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem
      label="标题"
      v-if="data.element_control !== 'grid' && data.element_control !== 'divLayout'"
    >
      <ElInput v-model="data.element_name" placeholder="如果无标题内容，标签宽度将变成0px" />
    </ElFormItem>
    <ElFormItem
      label="标题宽度"
      v-if="
        hasKey('element_labelWidth') ||
        ![
          'foldedPanel',
          'buttonArea',
          'grid',
          'tabs',
          'divider',
          'filePreview',
          'steps',
          'timeLine',
          'unit',
          'custom',
          'button',
          'images',
          'tips',
          'divLayout',
        ].includes(data.element_control)
      "
    >
      <ElInput v-model="data.element_labelWidth" />
    </ElFormItem>
    <ElFormItem label="多语言标题编号" v-if="hasKey('element_languageTitleCode')">
      <ElInput v-model="data.element_languageTitleCode" />
    </ElFormItem>
    <ElFormItem label="按钮名称" v-if="hasKey('element_button_name')">
      <ElInput v-model="data.element_button_name" />
    </ElFormItem>
    <ElFormItem label="提示语" v-if="hasKey('element_placeholder')">
      <ElInput v-model="data.element_placeholder" />
    </ElFormItem>

    <ElFormItem
      :label="hasKey('width') && hasKey('height') ? '列宽/列高' : hasKey('width') ? '列宽' : '列高'"
      style="display: flex; flex-direction: column"
      v-if="hasKey('width') || hasKey('height')"
    >
      <ElInput v-model="data.width" style="flex: 1" v-if="hasKey('width')" />
      <ElInput v-model="data.height" style="flex: 1" v-if="hasKey('height')" />
    </ElFormItem>
    <ElFormItem label="资源编号" v-if="hasKey('element_connect')">
      <ElInput v-model="data.element_connect" />
    </ElFormItem>
    <ElFormItem
      :label="
        data.multiple ||
        data.element_control === 'radio' ||
        data.element_control === 'checkbox' ||
        data.element_control === 'uploadForm'
          ? '默认显示'
          : data.element_control === 'slider' || data.element_control === 'rate'
          ? '默认值'
          : '默认内容'
      "
      v-if="
        hasKey('element_inpt') &&
        [
          'input',
          'password',
          'text',
          'rate',
          'switch',
          'slider',
          'select',
          'checkbox',
          'radio',
          'images',
          'time',
          'uploadForm',
          'richtext',
          'textarea',
          'processAdvice',
        ].includes(data.element_control)
      "
    >
      <ElInput
        v-if="
          [
            'input',
            'password',
            'text',
            'select',
            'checkbox',
            'radio',
            'switch',
            'images',
            'time',
            'uploadForm',
          ].includes(data.element_control)
        "
        v-model="data.element_inpt"
        :placeholder="
          data.multiple || ['radio', 'checkbox', 'uploadForm'].includes(data.element_control)
            ? '请输入以逗号隔开'
            : ''
        "
      />
      <ElInputNumber
        :min="parseFloat(data.minlength)"
        :max="parseFloat(data.maxlength)"
        v-if="data.element_control === 'slider' || data.element_control === 'rate'"
        v-model="data.element_inpt"
      />
      <ElInput
        type="textarea"
        v-else-if="['textarea', 'richtext', 'processAdvice'].includes(data.element_control)"
        v-model="data.element_inpt"
      />
    </ElFormItem>
    <ElFormItem label="超链接" v-if="hasKey('href')">
      <ElInput v-model="data.href" />
    </ElFormItem>
    <ElFormItem
      label="显示模式（查看，新增，修改，属性）"
      style="display: flex; flex-direction: column"
      v-if="hasKey('displayMode') || hasKey('attributes')"
    >
      <ElSelect v-model="data.showS" style="flex: 1">
        <ElOption
          v-for="item in displayMode"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </ElSelect>
      <ElSelect v-model="data.showA" style="flex: 1">
        <ElOption
          v-for="item in displayMode"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </ElSelect>
      <ElSelect v-model="data.showE" style="flex: 1">
        <ElOption
          v-for="item in displayMode"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </ElSelect>
      <ElSelect v-model="data.attributes" style="flex: 1">
        <ElOption
          v-for="item in attributesType"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </ElSelect>
    </ElFormItem>

    <template v-if="data.element_control === 'tabs'">
      <ElFormItem label="Tabs配置/显示模式（查看，新增，修改，属性）">
        <draggable
          tag="ul"
          item-key="index"
          ghostClass="ghost"
          handle=".drag-item"
          :group="{ name: 'options' }"
          :list="data.panes"
        >
          <template #item="{ element, index }">
            <div class="col-display">
              <div class="col-display-items">
                <div style="height: 30px">
                  <SvgIcon
                    style="margin: 0 5px; cursor: move"
                    className="drag-item"
                    name="drag-item"
                  />
                </div>
                <ElButton
                  type="primary"
                  circle
                  style="margin-left: 5px"
                  @click="handlePanesMove(index)"
                >
                  <SvgIcon name="delete" />
                </ElButton>
              </div>
              <div style="width: 83%">
                <ElInput placeholder="标签名" v-model="element.label" style="margin-bottom: 10px" />
                <ElInput
                  placeholder="绑定事件"
                  v-model="element.actionNo"
                  style="margin-bottom: 10px"
                />
                <ElInput
                  v-model="element.element_tips"
                  :rows="3"
                  type="textarea"
                  placeholder="提示说明"
                  style="margin-bottom: 10px"
                />
                <ElInput
                  placeholder="多语言编号"
                  v-model="element.element_languageTitleCode"
                  style="margin-bottom: 10px"
                />
                <ElFormItem
                  style="display: flex; flex-direction: column; border-bottom: 0; padding-bottom: 0"
                >
                  <ElSelect v-model="element.showS" style="flex: 1">
                    <ElOption
                      v-for="item in displayMode"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                  <ElSelect v-model="element.showA" style="flex: 1">
                    <ElOption
                      v-for="item in displayMode"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                  <ElSelect v-model="element.showE" style="flex: 1">
                    <ElOption
                      v-for="item in displayMode"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                  <ElSelect v-model="element.attributes" style="flex: 1">
                    <ElOption
                      v-for="item in attributesType"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                </ElFormItem>
              </div>
            </div>
          </template>
        </draggable>
        <ElButton type="text" @click="handleInsertPanes"> 添加标签 </ElButton>
        <!-- <div style="margin-left: 10px">
          <ElButton type="text" @click="handleInsertPanes"> 添加标签 </ElButton>
        </div> -->
      </ElFormItem>
    </template>
    <template v-if="data.element_control === 'grid'">
      <ElFormItem label="列配置项/显示模式（查看，新增，修改，属性）">
        <draggable
          tag="ul"
          item-key="index"
          ghostClass="ghost"
          handle=".drag-item"
          :group="{ name: 'options' }"
          :list="data.columns"
        >
          <template #item="{ element, index }">
            <div class="col-display">
              <div class="col-display-items">
                <div style="height: 30px">
                  <SvgIcon
                    style="margin: 0 5px; cursor: move"
                    className="drag-item"
                    name="drag-item"
                  />
                </div>
                <ElButton
                  type="primary"
                  circle
                  style="margin-left: 5px"
                  @click="handleOptionsRemove(index)"
                >
                  <SvgIcon name="delete" />
                </ElButton>
              </div>
              <div style="width: 83%">
                <div style="margin-bottom: 10px">
                  <ElInputNumber
                    placeholder="栅格值"
                    v-model.number="element.span"
                    :min="0"
                    :max="24"
                    style="width: 50%"
                  />
                  <ElInputNumber
                    placeholder="移动端栅格值"
                    v-model.number="element.mobileSpan"
                    :min="0"
                    :max="24"
                    style="width: 50%"
                  />
                </div>
                <div style="display: flex">
                  <ElInput
                    placeholder="绑定事件"
                    v-model="element.actionNo"
                    style="margin-bottom: 10px; flex: 1"
                  />
                  <ElSwitch
                    inline-prompt
                    active-text="内容居中"
                    inactive-text="内容不居中"
                    v-model="element.alignCenter"
                    style="flex: 1; display: flex; justify-content: center"
                  />
                </div>
                <ElFormItem
                  style="display: flex; flex-direction: column; border-bottom: 0; padding-bottom: 0"
                >
                  <ElSelect v-model="element.showS" style="flex: 1">
                    <ElOption
                      v-for="item in displayMode"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                  <ElSelect v-model="element.showA" style="flex: 1">
                    <ElOption
                      v-for="item in displayMode"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                  <ElSelect v-model="element.showE" style="flex: 1">
                    <ElOption
                      v-for="item in displayMode"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                  <ElSelect v-model="element.attributes" style="flex: 1">
                    <ElOption
                      v-for="item in attributesType"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    />
                  </ElSelect>
                </ElFormItem>
              </div>
            </div>
          </template>
        </draggable>
        <ElButton type="text" @click="handleInsertColumn"> 添加列 </ElButton>
        <!-- <div style="margin-left: 10px">
          <ElButton type="text" @click="handleInsertColumn"> 添加列 </ElButton>
        </div> -->
      </ElFormItem>
    </template>
  </ElForm>
</template>

<script lang="ts">
  import {
    conSelectType,
    displayMode,
    basicComponents,
    advanceComponents,
    layoutComponents,
    attributesType,
    fastComponent,
  } from '@/types/element';
  import draggable from 'vuedraggable';
  import { v4 } from 'uuid';
  import { debounce } from 'lodash-es';
  export default defineComponent({
    name: 'WidgetConfig',
    components: {
      draggable,
    },
    props: {
      select: {
        type: Object,
      },
      json: {
        type: Object,
      },
    },
    emits: ['update:select', 'update:json'],
    setup(props, context) {
      const data = ref<any>(props.select);
      const dataMap = ref<any>(props.json);
      const dataObj = ref<any>();

      watch(
        () => props.select,
        (val) => {
          data.value = val;
          if (!val) return false;
          data.value.element_languageTitleCode = data.value.element_languageTitleCode
            ? data.value.element_languageTitleCode
            : '';
          if (
            data.value?.element_type === 'time' ||
            data.value?.element_type === 'datetime' ||
            data.value?.element_type === 'datetimerange'
          ) {
            data.value.element_default_time_period = data.value.element_default_time_period
              ? data.value.element_default_time_period
              : '';
          }
        },
      );
      watch(
        () => props.json,
        (val) => (dataMap.value = val),
      );

      watch(data, (val) => context.emit('update:select', val));
      // {
      //   deep: true;
      // }

      const hasKey = (key: string) => Object.keys(data.value).includes(key);
      const hasKeyOptions = (key: string) => {
        if (data.value.options) {
          return Object.keys(data.value.options).includes(key);
        }
      };
      const calcuLate = (list: any, obj: any) => {
        if (list) {
          list = list.map((item) => {
            if (item.list) {
              const data = item.list.map((it) => {
                if (it.id === obj.id) {
                  it = obj;
                }
                return it;
              });
              item.list = data;
            } else {
              if (item.id === obj.id) {
                item = obj;
              } else {
                if (item.list) {
                  item.list = item.list.map((it) => {
                    if (it.columns) {
                      it.columns = it.columns.map((col: any) => ({
                        ...col,
                        columns: calcuLate(col.columns, obj),
                      }));
                    }
                    if (it.panes) {
                      it.panes = it.panes.map((col: any) => ({
                        ...col,
                        panes: calcuLate(col.panes, obj),
                      }));
                    }
                    if (it.panes) {
                      it.list = it.list.map((col: any) => ({
                        ...col,
                        list: calcuLate(col.list, obj),
                      }));
                    }
                    return it;
                  });
                }
              }
            }
            return item;
          });
        }
        return list;
      };
      const handleTypeModeChange = (value: string) => {
        const contrastBasis = basicComponents.filter((item) => {
          return item.element_control === value;
        });
        const contrastSenior = advanceComponents.filter((item) => {
          return item.element_control === value;
        });
        const contrastLayout = layoutComponents.filter((item) => {
          return item.element_control === value;
        });
        if (contrastBasis.length) {
          dataObj.value = {
            ...contrastBasis[0],
            id: data.value.id,
            element_name: data.value.element_name,
            element_control: data.value.element_control,
            element_code: data.value.element_code,
            showS: data.value.showS,
            showA: data.value.showA,
            showE: data.value.showE,
            attributes: data.value.attributes,
          };
          context.emit('update:select', dataObj.value);
        } else if (contrastSenior.length) {
          dataObj.value = {
            ...contrastSenior[0],
            id: data.value.id,
            element_name: data.value.element_name,
            element_control: data.value.element_control,
            element_code: data.value.element_code,
            showS: data.value.showS,
            showA: data.value.showA,
            showE: data.value.showE,
            attributes: data.value.attributes,
          };
          context.emit('update:select', dataObj.value);
        } else if (contrastLayout.length) {
          dataObj.value = {
            ...contrastLayout[0],
            id: data.value.id,
            element_name: data.value.element_name,
            element_control: data.value.element_control,
            element_code: data.value.element_code,
            showS: data.value.showS,
            showA: data.value.showA,
            showE: data.value.showE,
            attributes: data.value.attributes,
          };
          context.emit('update:select', dataObj.value);
        }
        if (value == 'inputScan') {
          const contrastFast = fastComponent.filter((item) => {
            return item.element_control === value;
          });
          if (contrastFast.length) {
            dataObj.value = {
              ...contrastFast[0],
              id: data.value.id,
              element_name: data.value.element_name,
              element_control: data.value.element_control,
              element_code: data.value.element_code,
              showS: data.value.showS,
              showA: data.value.showA,
              showE: data.value.showE,
              attributes: data.value.attributes,
              element_append: data.value.element_append,
              element_type: data.value.element_type,
            };
            context.emit('update:select', dataObj.value);
          }
        }
        for (let i = 0; i < dataMap.value.display_area.length; i++) {
          if (dataMap.value.display_area[i].id === dataObj.value.id) {
            dataMap.value.display_area[i] = dataObj.value;
          } else {
            if (dataMap.value.display_area[i].panes) {
              dataMap.value.display_area[i].panes.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.display_area[i].columns) {
              dataMap.value.display_area[i].columns.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.display_area[i].panel) {
              dataMap.value.display_area[i].panel.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
          }
          if (dataMap.value.display_area[i].list) {
            dataMap.value.display_area[i].list = dataMap.value.display_area[i].list.map((it) => {
              if (it.id === dataObj.value.id) {
                it = dataObj.value;
                return it;
              } else {
                return {
                  ...it,
                  list: calcuLate(it.list, dataObj.value),
                };
              }
            });
          }
          context.emit('update:json', dataMap.value);
        }
        for (let i = 0; i < dataMap.value.hidden_area.length; i++) {
          if (dataMap.value.hidden_area[i].id === dataObj.value.id) {
            dataMap.value.hidden_area[i] = dataObj.value;
          } else {
            if (dataMap.value.hidden_area[i].panes) {
              dataMap.value.hidden_area[i].panes.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.hidden_area[i].columns) {
              dataMap.value.hidden_area[i].columns.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.hidden_area[i].panel) {
              dataMap.value.hidden_area[i].panel.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.display_area[i].list) {
              dataMap.value.display_area[i].list = dataMap.value.display_area[i].list.map((it) => {
                if (it.id === dataObj.value.id) {
                  it = dataObj.value;
                  return it;
                } else {
                  return {
                    ...it,
                    list: calcuLate(it.list, dataObj.value),
                  };
                }
              });
            }
          }
          context.emit('update:json', dataMap.value);
        }
        for (let i = 0; i < dataMap.value.trash_area.length; i++) {
          if (dataMap.value.trash_area[i].id === dataObj.value.id) {
            dataMap.value.trash_area[i] = dataObj.value;
          } else {
            if (dataMap.value.trash_area[i].panes) {
              dataMap.value.trash_area[i].panes.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.trash_area[i].columns) {
              dataMap.value.trash_area[i].columns.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.trash_area[i].panel) {
              dataMap.value.trash_area[i].panel.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.display_area[i].list) {
              dataMap.value.display_area[i].list = dataMap.value.display_area[i].list.map((it) => {
                if (it.id === dataObj.value.id) {
                  it = dataObj.value;
                  return it;
                } else {
                  return {
                    ...it,
                    list: calcuLate(it.list, dataObj.value),
                  };
                }
              });
            }
          }
          context.emit('update:json', dataMap.value);
        }
        for (let i = 0; i < dataMap.value.button_area && dataMap.value.button_area.length; i++) {
          if (dataMap.value.button_area[i].id === dataObj.value.id) {
            dataMap.value.button_area[i] = dataObj.value;
          } else {
            if (dataMap.value.button_area[i].panes) {
              dataMap.value.button_area[i].panes.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.button_area[i].columns) {
              dataMap.value.button_area[i].columns.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.button_area[i].panel) {
              dataMap.value.button_area[i].panel.map((item) => {
                if (item.list.length) {
                  item.list = item.list.map((col: any) => {
                    if (col.panes) {
                      return {
                        ...col,
                        panes: calcuLate(col.panes, dataObj.value),
                      };
                    } else if (col.columns) {
                      return {
                        ...col,
                        columns: calcuLate(col.columns, dataObj.value),
                      };
                    } else if (col.panel) {
                      return {
                        ...col,
                        panel: calcuLate(col.panel, dataObj.value),
                      };
                    } else {
                      if (col.id === dataObj.value.id) {
                        col = dataObj.value;
                      }
                      return col;
                    }
                  });
                }
              });
            }
            if (dataMap.value.display_area[i].list) {
              dataMap.value.display_area[i].list = dataMap.value.display_area[i].list.map((it) => {
                if (it.id === dataObj.value.id) {
                  it = dataObj.value;
                  return it;
                } else {
                  return {
                    ...it,
                    list: calcuLate(it.list, dataObj.value),
                  };
                }
              });
            }
          }
          context.emit('update:json', dataMap.value);
        }

        // Object.keys(data.value).reduce((acc, key) => {
        //   if (data.value[key] === data.value[key]) {
        //     acc[key] = data.value[key];
        //   }
        //   return acc;
        // }, {});
      };
      const handleInsertColumn = () => {
        data.value.columns.push({
          span: 0,
          list: [],
          showS: '',
          showA: '',
          showE: '',
          actionNo: '',
          attributes: '',
        });
      };
      const handlePanesMove = debounce(async (index: number) => {
        if (data.value.element_control === 'tabs') {
          if (data.value.panes.length === 1) {
            ElMessage.warning('至少保留一个');
            return;
          }
          data.value.panes.splice(index, 1);
        } else {
          data.value.panes.splice(index, 1);
        }
      }, 500);
      const handleInsertPanes = () => {
        const id = v4().replaceAll('-', '');
        data.value.panes.push({
          name: `${data.value.element_control}_${id}`,
          label: `Tab${data.value.panes.length + 1}`,
          list: [],
          showS: '',
          showA: '',
          showE: '',
          actionNo: '',
          attributes: '',
        });
      };
      const handleOptionsRemove = debounce(async (index: number) => {
        if (data.value.element_control === 'grid') {
          if (data.value.columns.length === 1) {
            ElMessage.warning('至少保留一个');
            return;
          }
          data.value.columns.splice(index, 1);
        } else {
          data.value.options.splice(index, 1);
        }
      }, 500);

      return {
        data,
        dataMap,
        conSelectType,
        displayMode,
        attributesType,
        basicComponents,
        advanceComponents,
        layoutComponents,
        fastComponent,
        handleTypeModeChange,
        handleOptionsRemove,
        handleInsertColumn,
        handlePanesMove,
        handleInsertPanes,
        hasKey,
        hasKeyOptions,
      };
    },
  });
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
  }
  :deep(.el-form-item__content) {
    align-items: flex-end;
  }
  :deep(.el-radio-button__inner) {
    width: $width;
  }

  .col-display {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    &-items {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 116px;
      .fc-style {
        padding-bottom: 0 !important;
      }
    }
  }
</style>
